Release 10.1A: OpenEdge Getting Started:
Progress OpenEdge Studio

Detailed main window procedure

The following sections lead you through assembling your main window in more detail.

Creating a SmartWindow

The first step in assembling the main window is to create a new SmartWindow. The SmartWindow serves as a container for other SmartObjects.

To create a new SmartWindow:

Open the New dialog box and choose a SmartWindow:



A new, untitled SmartWindow and the SmartWindow Cue Card appear:



Each time you create a new SmartObject, the AppBuilder displays a Cue Card for the type of SmartObject you are creating. The Cue Card provides useful information including an explanation of how the SmartObject works and key steps to follow while creating that SmartObject.You do not need to use the Cue Cards for this tutorial.

Remember, when you use the AppBuilder to develop an application, the Cue Cards are available to assist you. If you close the Cue Cards, you can always open them again using the Help Cue Card option from the AppBuilder menu bar.

Choose the Object Properties icon in the AppBuilder toolbar. The property sheet for the new widget appears. Widget is a general term for a visual element of the GUI. The basic property sheet allows you to specify the column, row, height, width in character units, and other object-specfic attributes as shown in the following figure:



The Advanced button opens the Advanced Property dialog box with additional properties.

Type 147.00 for the Width and 25.50 for the Height in the Geometry section. These dimensions resize the window so that it is large enough for the objects you will add.
Choose OK in the property sheet. The main window resizes to its new dimensions:



Notice that the default frame retained the original dimensions of the SmartWindow. Because SmartContainers can contain more than one frame, their default frames do not automatically resize when you expand the SmartContainer. The frames in design windows for other types of SmartObjects do resize automatically with the window.

Use the frame’s handles to fit the frame to the SmartWindow:

You are now ready to define the sections of the main window. When you ran the sample application in Chapter 2, "Working with the Sample Application," you saw that the Order Tracking System main window is divided into these sections:

Banner
Customer
Order
Order Line

Adding a banner image

In this section, you add a graphic banner to the main window. After adding the banner, you define the Customer, Order, and Order Line sections.

To add a banner to the main window:

Choose the Image button in the Object Palette and place one on your window. A placeholder image appears in the main window:



Double-click the placeholder image. The IMAGE–1 property sheet appears:



Choose the Image button. The Choose Image Files dialog box appears.
Browse to and select <wrk>\images\s2_banr.jpg, where <wrk> is your working directory.
Choose Open. The File list displays all the images in the directory. The selected image previews to the right of the file list:



Note: The image appears in the Preview section only if you have selected the Preview option.
Choose OK, and close the property sheet to return to your workspace.
Resize the banner and position it, as shown in the following figure:

Outlining the Customer, Order, and Order Line sections

After creating the main window and adding the banner, your next task is to divide the window into Customer, Order, and Order Line sections.

To outline the window’s sections:

Double-click the Rectangle icon in the Object Palette. A lock appears on the icon indicating that you can add multiple rectangles without reselecting the icon for each.
Note: To identify an object in the palette, select the Object Palette and pass the cursor over an object. As the pointer passes over an object, a ToolTip identifies that object. For more information about the Object Palette, See Chapter 1, " Overview of the OpenEdge Studio."
Draw rectangles to roughly outline the Customer, Order, and Order Line sections.
Double-click each rectangle in turn to open its property sheet:



Set the following values for each rectangle’s Geometry attributes:

Rectangle	Column	Row	Width	Height
RECT-1	1.00	2.10	147	5.48
RECT-2	1.00	7.48	147	8.33
RECT-3	1.00	15.81	147	10.67

The AppBuilder resizes the rectangles to reflect the new settings. Your main window should now look like this:

Adding text labels to the sections

Now that you have divided your main window into sections for Customer, Order, and Order Line information, you need to add text labels to identify the sections.

To add text labels to the sections:

Double-click the Text icon in the Object Palette.
Place a text label in each section, as shown:



Open the property sheet for the text label in the first section:



Type Customer in the Text field:



Choose the Color icon to open the Choose Color dialog box:



Choose dark blue, setting 1, for the Foreground Colors.
Note: The colors labeled with a question mark indicate the default colors.
Choose OK and return to the main window.
Resize the text label so that all the text is visible.
Repeat Step 3 through Step 8 for the Order and Order Line text labels.

When you are finished, the window looks like the following:

Naming and saving the new SmartWindow

Now that you have your main window’s basic design, you should name the SmartWindow and save your work before adding SmartObjects to it.

To name the SmartWindow and save your work:

Choose the List Objects icon on the AppBuilder toolbar. The List Objects dialog box appears:



Double-click the wWin object from the list to open the property sheet:



Type SportsPro Order Tracking System for the Title and choose OK.
Close the property sheet. The title appears in the title bar:



Save your file as wordtrk.w in your working directory.

You are now ready to add objects to your window.